
<script>
    if(hljs) {
        hljs.initHighlightingOnLoad();
    }
</script>

<style type="text/css">
    .md-preview table {
        margin-bottom: 15px;
        max-width: 100%;
        width: auto;
        border: 1px solid #f4f4f4;
        background-color: transparent;
        border-collapse: collapse;
        border-spacing: 0;
        box-sizing: border-box;
    }
    .md-preview table th, .md-preview table td {
        border: 1px solid #ccc;
        padding: 6px 13px;
    }

    .md-preview table th {
        font-weight: bold;
    }

    .md-preview table tr {
        background-color: #fff;
        border-top: 1px solid #ccc;
    }

    .md-preview table tr:nth-child(2n) {
        background-color: #f8f8f8;
    }

    .md-preview .hljs {
        background: transparent;
    }

    .md-preview pre {
        border: 1px dashed #dddddd;
        background: #fafafa none repeat scroll 0 0;
        border-style: solid;
        border-width: 1px 1px 1px 3px;
    }

    .md-preview h1, .md-preview h2, .md-preview h3 {
        font-weight: bold;
    }

    .md-preview blockquote {
        color: #666;
        border-color: #eee #eee #eee #5bc0de;
        border-radius: 2px;
        border-style: solid;
        border-width: 1px 1px 1px 5px;
        padding: 5px 8px;
    }
</style>

<form role="form" method="post" action="{:U(ACTION_NAME)}">
    <!-- general form elements -->
    <div class="box-body" style="padding-bottom:0">

        <form role="form" method="post" action="{:U(ACTION_NAME)}">
            <input type="hidden" id="aid" name="aid" value="{$res.aid}">
            <input type="hidden" name="admin" value="1"/>

            <div class="col-xs-12">
                <!-- general form elements -->
                <div class="box box-primary">
                    <div class="box-body">
                        <div style="clear: both">
                            <div class="col-xs-12" style="padding-left:0">
                                <div class="form-group">
                                    <label for="title">文档标题</label>
                                    <input type="text" placeholder="" id="title" name="title" value="{$res.title}" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div style="clear: both">
                            <div class="col-xs-6" style="padding-left:0">
                                <div class="form-group">
                                    <label for="filename">文档名称 <span class="text-red">(Markdown文件名, 例如: <span class="text-blue">welcome.md</span>)</span></label>
                                    <input type="text" placeholder="" id="filename" name="filename" value="{$res.filename}" class="form-control">
                                </div>
                            </div>
                            <div class="col-xs-3" style="padding-left:0">
                                <div class="form-group">
                                    <label for="list_order">排序</label>
                                    <input type="text" placeholder="" id="list_order" name="list_order" value="{$res.list_order|intval}" class="form-control took-w150">
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-3" style="padding-left:0">
                            <div class="form-group">
                                <label for="status">状态</label>
                                <select id="status" name="status" class="form-control">
                                    <option value="0" <if condition="$res[status] eq 0">selected="selected"</if>>隐藏</option>
                                    <option value="1" <if condition="$res[status] eq 1">selected="selected"</if>>显示</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="content">文档内容 </label>
                            &nbsp; <a href="https://segmentfault.com/markdown" target="_blank" class="text-grey"><u>语法说明?</u></a>
                            &nbsp; <a href="javascript:void(0)" onclick="show_table_help()" class="text-grey"><u>表格语法</u></a>
                            <textarea placeholder="" rows="3" id="content" name="content" class="form-control">{$res.content}</textarea>
                            <script>
                                $(function() {
                                    $("#content").markdown({
                                        autofocus:true,
                                        savable:false,
                                        language:'zh',
                                        height:250
                                    });
                                })
                            </script>
                        </div>
                        <textarea id="content_area" style="display:none"></textarea>
                        <div class="box-footer text-center">
                            <button class="btn btn-primary" type="submit">保存文档</button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <button class="btn btn-info" type="button" onclick="previewWiki({$res.aid})">预览查看</button>
                        </div>

                    </div><!-- /.box-body -->
                </div><!-- /.box -->
            </div>
            <!-- /.col-md -->

        </form>

    </div><!-- /.box-body -->
</form>

<textarea id="table_help" style="display: none">
<strong>表格语法：</strong>
<br />第一栏 &nbsp; |表头1|表头2|表头3|
<br />第二栏 &nbsp; |----|------|------|
<br />注意：必须有第二栏|竖线的内容列表才能显示出来, 第二栏的对齐语法如下：
<br />左对齐 &nbsp; :----
<br />右对齐 &nbsp; ----:
<br />居中对齐 &nbsp; :----:
<br />
<br />
<span class="text-red">示例1：</span>
<br />
<br />First Header | Second Header | Third Header
<br />------------ | ------------- | ------------
<br />Content Cell | Content Cell  | Content Cell
<br />Content Cell | Content Cell  | Content Cell
<br />
<br /><span class="text-red">示例2：</span>
<br />
<br />| 项目 | 价格 | 数量 |
<br />| :--- | -----: | :---: |
<br />| 电脑  |￥5600 |  5    |
<br />| 手机  |￥4300 |  12   |
<br />| 冰箱  |￥3100 | 234   |
</textarea>

<script>
    function show_table_help() {
        BootstrapDialog.configDefaultOptions({nl2br:false});
        BootstrapDialog.show({
            title: '表格语法',
            message: function(dialog) {
                dialog.setClosable(true);
                return $('#table_help').val();
            },
            buttons: [{
                label: '确定',
                action: function(dialogItself){
                    dialogItself.close();
                }
            }]
        });
    }
    //预览查看文档
    function previewWiki(aid) {
        aid = aid || '';
        var title = $("#title").val();
        var content = $("#content").val();
        //防止被解析成html标签
        content = content.replace('<','&lt;').replace('>','&gt;');
        $("#content_area").val(content);
        //记录cookie
        //setCookie('preview_title', encodeURIComponent(title));
        //setCookie('preview_content', encodeURIComponent($("#content_area").val())); //不能用cookie,因为cookie有长度限制
        //缓存预览数据
        $.ajax({
            url: "{:U('preview_cache')}",
            data: {content:content, title:title},
            type: 'POST',
            cache: false,
            dataType: "html",
            success: function (d) {}
        });
        if(aid) {
            //var url = './Home/Wiki/view/aid/'+aid+'.html';
            //var url = './Home/Wiki/index/preview/1#view-'+aid;
            //var url = './Home/Wiki/view/aid/'+aid+'.html';
            //window.open(url, '_blank');
        }
        var url = './Home/Wiki/preview/aid/'+aid;
        //window.open(url, 'preview_wiki');
        window.open(url, 'preview_wiki', 'width=800, height=450, top=110, left=160, scrollbars=yes, toolbar=no, menubar=no, resizable=no, location=no, status=no');
        //window.showModalDialog(url, '',"dialogWidth=800px;dialogHeight=400px");
    }
</script>